<script setup lang='ts'>
import { CopyDocument } from '@element-plus/icons-vue'
import { useDoNotice, useGetBankAccountInfoMethod } from '@fl/api/man-api/jc-authentication'
import { useMessage } from '@fl/hooks/web/use-message'
import { toRefs } from 'vue'

import { useStep } from './use-step'

const props = defineProps<{
    data?: any
}>()
const { data: bankAccount } = useGetBankAccountInfoMethod()
const { data } = toRefs(props)

const { stepMove } = useStep()

const success = 'https://public-obs-cdn.anjulian.com.cn/2024-06-03/19c39c9e-ab76-4970-a1cf-fe0ba4223da7.png'

const { createConfirmModal, createErrorModal } = useMessage()

const { isPending, mutate } = useDoNotice()

function doRemit() {
    createConfirmModal({
        content: '为了尽快完成您的企业认证，请确认是否完成打款，若未打款平台将驳回您的申请！',
        onSuccess: () => {
            // 审核记录id
            const id = data.value.id
            mutate({ id }, {
                onError: (content: any) => {
                    createErrorModal({ content })
                },
                onSuccess: () => {
                    stepMove({
                        auditStatus: 1,
                        step: 4,
                    })
                },
            })
        },
        title: '打款确认',
    })
}

function doCopy() {
    const text = `开户名称：${bankAccount.value.accountName}\r\n开户银行：${bankAccount.value.bank}\r\n开户行号：${bankAccount.value.bankCode}\r\n银行账号：${bankAccount.value.bankCardNo}`
    navigator.clipboard.writeText(text).then(() => {
        ElMessage.success('复制成功')
    }).catch((err) => {
        // 复制失败
        console.error('复制失败', err)
    })
}
</script>

<template>
    <div class="w-full">
        <div class="text-center">
            <img :src="success"
                 class="mx-auto h80 w80"
            >

            <p class="my-20 text-20 c-#1D2129 font-600">
                提交成功
            </p>

            <p class="text-18 c-#767676">
                请使用对公账户向我司账户汇入<span class="c-#EA0000">0.06</span>元进行认证，打款完成后点击”已完成打款”按钮，付款备注为：企业认证
            </p>
        </div>

        <div class="px-20 py-20 mx-auto mt-40 bg-#F7F8FA rounded-4 h224 w690">
            <p class="mb-20 flex justify-between items-center">
                <span class="text-20 c-#1A1A1A font-600">账户信息</span>

                <span class="text-16 c-#4E5969 cursor-pointer"
                      @click="doCopy"
                >
                    <span>复制信息</span>

                    <el-icon class="ml-10 translate-y-3">
                        <CopyDocument />
                    </el-icon>
                </span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">开户名称：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.accountName }} </span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">开户银行：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.bank }}</span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">开户行号：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.bankCode }}</span>
            </p>

            <p class="mb-16 flex justify-between items-center">
                <span class="text-16 c-#767676">银行账号：</span>

                <span class="text-16 c-#1D2129 font-600">{{ bankAccount.bankCardNo }}</span>
            </p>
        </div>

        <div class="mb-30 mt-50 text-center">
            <ElButton @click="stepMove()">
                返回首页
            </ElButton>

            <!-- <ElButton>审核中</ElButton> -->

            <ElButton v-loading="isPending"
                      type="primary"
                      @click="doRemit"
            >
                已完成打款
            </ElButton>
        </div>
    </div>
</template>

<style lang="less" scoped>

</style>
